<template>
  <div class="wxcode">
    <nav>
      <div class="nav-left">可信工作证签发系统</div>
      <div class="nav-right">
        <a-dropdown>
          <span>
            <a-avatar
              size="small"
              :src="$store.getters.avatar != '' ? $store.getters.avatar : avatar"
              class="antd-pro-global-header-index-avatar"
              style="margin-right: 10px"
            />
            <span>{{ $store.getters.nickname }}</span>
          </span>
          <a-menu slot="overlay">
            <a-menu-item key="logout" @click="handleLogout">
              <a-icon type="logout" />
              退出登录
            </a-menu-item>
          </a-menu>
        </a-dropdown>
      </div>
    </nav>
    <div class="wxcode-left">
      <h3>实名认证</h3>
      <div class="wxcode-left-img">
        <img :src="imgurl" alt="" />
        <p>请用微信扫码，前往实名认证</p>
        
      </div>
      <a-button type="primary" @click="updateRole"> 已认证完成 </a-button>
    </div>
    <div class="wxcode-right"></div>
  </div>
</template>

<script>
import { upRole } from '@/api/user'
import { Modal } from 'ant-design-vue'

import notification from 'ant-design-vue/es/notification'
import { loginOut, userOut } from '@/api/user'
import { removeToken } from '@/utils/util.js'
export default {
  data() {
    return {
      imgurl: '',
      avatar: require('../../assets/defaultTX.png'),
    }
  },
  mounted() {
    this.imgurl = `https://api.gxzg.org.cn/tools/Qrcode?isSetLogo=0&download=0&code=100100&sign=ffddf97d212fdf28483aaff25cfd0a16&url=${
      window.location.protocol + '//' + window.location.host
    }/license?role=${this.$store.state.user.info.role}`
    console.log(this.imgurl,66)
  },
  methods: {
    updateRole() {
      upRole({})
        .then((res) => {
          console.log(res)
          // if (res.data.role === 'company_user') {
          //   this.$router.push('/')
          // } else {
          //   notification.warning({
          //     message: '警告',
          //     description: '还未认证',
          //   })
          // }
          this.$store.dispatch('GetInfo2').then((res2) => {
            this.imgurl = `https://api.gxzg.org.cn/tools/Qrcode?isSetLogo=0&download=0&code=100100&sign=ffddf97d212fdf28483aaff25cfd0a16&url=${
              window.location.protocol + '//' + window.location.host
            }/license?role=${this.$store.state.user.info.role}`
            if (res2.data.role === 'company_user') {
              this.$router.push('/')
            } else {
              notification.warning({
                message: '警告',
                description: '请扫码完成企业认证',
              })
            }
          })
        })
        .catch((err) => {
          console.log(err)
        })
    },
    handleLogout(e) {
      Modal.confirm({
        title: '提示',
        content: '确定要退出吗？',
        onOk: () => {
          userOut({})
            .then((res) => {
              console.log(res)
              this.$notification.success({
                message: '退出登录成功',
                description: '',
              })
              removeToken('pssid')
              setTimeout(() => {
                window.location.reload()
              }, 1500)
            })
            .catch((err) => {})
        },
        onCancel() {},
      })
    },
  },
}
</script>

<style lang="less" scoped>
.wxcode {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 140px 0 144px;
  position: relative;
  nav {
    position: absolute;
    top: 0;
    width: 100%;
    height: 50px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 2px 2px 2px 2px #eee;
    padding: 0 30px;
    .nav-left {
      color: #1890ff;
      font-size: 20px;
      font-weight: bold;
    }
  }
  &-left {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 249px;
    // margin-left: 18%;
    h3 {
      font-weight: bold;
      line-height: 1;
    }
    &-img {
      padding: 10px 30px 10px;
      width: 245px;
      height: 235px;
      box-sizing: border-box;
      margin-bottom: 30px;
      text-align: center;
      border: 1px solid #e8e8e8;
      border-radius: 4px;
      img {
        max-width: 182px;
        max-height: 182px;
        margin-bottom: 10px;
      }
      p {
        color: #999;
        margin-bottom: 0;
      }
    }
  }
  &-right {
    width: 300px;
    height: 300px;
    background: url('../../assets/daBG.png') no-repeat center;
    background-size: 300px 300px;
    margin: 0 0 0 150px;
  }
}
</style>